<template>
  <el-dialog
    title="插播消息"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form size="small" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="内容" prop="content">
      <el-input type="textarea" :maxlength="500" v-model="dataForm.content" placeholder="内容" :style="'font-size:'+ dataForm.size+'px'"></el-input>
    </el-form-item>
    <el-form-item label="字体大小" prop="size">
      <el-input-number v-model="dataForm.size" controls-position="right"  :min="10" :max="100"></el-input-number>
    </el-form-item>
      <el-form-item label="字体颜色" prop="color">
        <el-color-picker v-model="dataForm.color"></el-color-picker>
      </el-form-item>
    <el-form-item label="滚动速度" prop="speed">
      <el-select v-model="dataForm.speed"  placeholder="选择">
        <el-option label="慢" value="1"></el-option>
        <el-option label="一般" value="2"></el-option>
        <el-option label="快" value="3"></el-option>
        <el-option label="很快" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="显示位置" prop="position">
      <el-select v-model="dataForm.position"  placeholder="选择">
        <el-option label="顶部" value="1"></el-option>
        <el-option label="底部" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时长" prop="duration1">
      <el-input type="number" style="width: 280px!important;" :min="1" :max="100" placeholder="请输入时长" v-model="dataForm.duration1" class="input-with-select">
        <el-select style="width: 80px!important;" v-model="time_unit" slot="append" placeholder="选择单位">
          <el-option label="秒" :value="1"></el-option>
          <el-option label="分钟" :value="2"></el-option>
          <el-option label="小时" :value="3"></el-option>
          <el-option label="天" :value="4"></el-option>
        </el-select>
      </el-input>
    </el-form-item>
      <!--<el-form-item label="定时发送">-->
        <!--<el-switch v-model="timing">-->

        <!--</el-switch>-->
      <!--</el-form-item>-->
      <!--<el-form-item v-if="timing" prop="start_time">-->
        <!--<el-date-picker-->
          <!--v-model="start_time"-->
          <!--type="datetime"-->
          <!--placeholder="选择日期时间">-->
        <!--</el-date-picker>-->
      <!--</el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<style scoped>
  .el-select .el-input {
    width: 130px!important;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff!important;
  }
</style>
<script>
  export default {
    name: 'rollmsg-add',
    data () {
      return {
        timing: false,
        deviceIds: [],
        start_time: [],
        time_unit: 2,
        visible: false,
        dataForm: {
          id: 0,
          content: '',
          speed: '2',
          color: '#000000',
          size: '20',
          position: '1',
          duration1: '10',
          duration: '10',
        },
        dataRule: {
          content: [
            { required: true, message: '内容不能为空', trigger: 'blur' }
          ],
          speed: [
            { required: true, message: '速度不能为空', trigger: 'blur' }
          ],
          color: [
            { required: true, message: '颜色不能为空', trigger: 'blur' }
          ],
          size: [
            { required: true, message: '大小不能为空', trigger: 'blur' }
          ],
          position: [
            { required: true, message: '选择', trigger: 'blur' }
          ],
          duration1: [
            { required: true, message: '时长不能为空', trigger: 'blur' }
          ],
          start_time: [
            { required: true, message: '请选择时间', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init: function (data) {
        this.visible = true
        this.deviceIds = data
        // this.getDataList()
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            switch (this.time_unit) {
              case 2:
                this.dataForm.duration = this.dataForm.duration1 * 60
                break
              case 3:
                this.dataForm.duration = this.dataForm.duration1 * 60 * 60
                break
              case 4:
                this.dataForm.duration = this.dataForm.duration1 * 60 * 60 * 24
                break
            }
            if (this.timing) {
              this.dataForm.startTime = this.start_time.pattern('yyyy-MM-dd HH:mm:ss')
            }
            let form = {}
            form.dids = this.deviceIds
            form.msg = this.dataForm
            this.$http({
              url: this.$http.adornUrl(`/sys/rollmsg/save`),
              method: 'post',
              data: this.$http.adornData(form)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
